<script setup>
import { ref, onMounted } from 'vue'
import { queryAllApi, addApi, updateApi, deleteDeptApi } from '@/api/dept'
import { ElMessage, ElMessageBox } from 'element-plus'

// 示例数据
const deptList = ref([]);

// 控制新增部门对话框显示状态
const dialogVisible = ref(false)

// 新增/修改部门表单数据
const deptForm = ref({
  id: undefined,
  name: ''
})

// 表单引用，用于验证
const deptFormRef = ref()

// 部门名称验证规则
const rules = {
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度为2-10位', trigger: 'blur' }
  ]
}

// 打开新增部门对话框
const handleAdd = () => {
  // 重置表单数据
  deptForm.value = {
    id: undefined,
    name: ''
  }
  dialogVisible.value = true
}

// 编辑部门 - 根据ID查询回显数据
const handleEdit = (id) => {
  // 查找要编辑的部门数据
  const dept = deptList.value.find(item => item.id === id)
  if (dept) {
    deptForm.value = {
      id: dept.id,
      name: dept.name
    }
    dialogVisible.value = true
  }
}

// 删除部门 - 根据ID删除部门
const handleDelete = (id) => {
  ElMessageBox.confirm('确认删除该部门吗？', '删除确认', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const result = await deleteDeptApi(id)
      if (result.code == 1) {
        ElMessage.success('删除成功')
        search() // 重新加载部门列表
      } else {
        ElMessage.error('删除失败')
      }
    } catch (error) {
      ElMessage.error('删除失败: ' + error.message)
    }
  }).catch(() => {
    // 用户取消删除
    ElMessage.info('已取消删除')
  })
}

// 保存部门（新增或修改）
const handleSave = async () => {
  // 表单验证
  await deptFormRef.value.validate()
  
  try {
    let result
    // 判断是新增还是修改
    if (deptForm.value.id) {
      // 修改部门
      result = await updateApi(deptForm.value)
    } else {
      // 新增部门
      result = await addApi(deptForm.value)
    }
    
    // 处理响应结果
    if(result.code == 1){
      dialogVisible.value = false
      ElMessage.success(deptForm.value.id ? '修改成功' : '新增成功')
      search()
    } else {
      ElMessage.error(deptForm.value.id ? '修改失败' : '新增失败')
    }
  } catch (error) {
    ElMessage.error((deptForm.value.id ? '修改失败: ' : '新增失败: ') + error.message)
  }
  
  // 重置表单
  deptFormRef.value.resetFields()
}

// 取消新增/修改
const handleCancel = () => {
  dialogVisible.value = false
  // 重置表单
  deptFormRef.value.resetFields()
}

const search = async () => {
  try {
    const result = await queryAllApi()
    deptList.value = result.data
  } catch (error) {
    ElMessage.error('获取部门列表失败: ' + error.message)
  }
}

onMounted(() => {
  search()
})
</script>

<template>
  <h1>部门管理</h1>

  <!-- 按钮靠页面右侧显示 -->
  <el-button type="primary" @click="handleAdd" style="float: right;"> + 新增部门</el-button> <br><br>

  <el-table :data="deptList" border style="width: 100%;">
    <el-table-column type="index" label="序号" width="100" align="center" />
    <el-table-column prop="name" label="部门名称" width="300" align="center" />
    <el-table-column prop="updateTime" label="最后修改时间" width="300" align="center" />
    <el-table-column fixed="right" label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row.id)">修改</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增/修改部门对话框 -->
  <el-dialog v-model="dialogVisible" :title="deptForm.id ? '修改部门' : '新增部门'" width="500px">
    <el-form ref="deptFormRef" :model="deptForm" :rules="rules" label-width="100px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="deptForm.name" placeholder="请输入部门名称，长度为2-10位" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSave">{{ deptForm.id ? '修改' : '新增' }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>